<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>全年日历</title>
    <link rel="stylesheet" href="../../../css/wx/mui.min.css">
    <link rel="stylesheet" href="http://at.alicdn.com/t/font_791568_wxhcq9h3wmp.css">
    <link rel="stylesheet" href="../../../css/wx/calendar.css"/>
    <script type="text/javascript">
        var pageConfig = {
            jss: ["app/gwat151/gwat151"]
        };
    </script>
    <script data-main="../../../js/wx/public/config" src="../../../js/require.js"></script>

</head>
<body style="background-color: #fff;">
<div id="calendar">
    <div class="widget">
        <div v-if="mode == 0" class="calendar-year fullYear">
            <div class="calendar-year-title">
                <span class="year-title-normal leftBtn" @click="selectPrevYear"></span>
                <span class="year-title-active">{{selectedYear}}</span>
                <span class="year-title-normal rightBtn" @click="selectNextYear"></span>
            </div>
            <div class="mui-scroll-wrapper">
                <div class="mui-scroll">
                    <div class="calendar-months">
                        <div class="calendar-month" v-for="(monthDays, index_month) in daysOfYear" :key="index_month">
                            <div class="month-title">{{monthsTitle[index_month]}}</div>
                            <div class="calendar-week">
                                <div class="week" v-for="weektitle in weeksTitle" :key="weektitle">{{weektitle}}</div>
                            </div>
                            <div class="calendar-week calendar-days" v-for="(weeks, index_i) in monthDays"
                                 :key="index_i">
                                <div class="week week-day" v-for="(day, index_j) in weeks"
                                     :class="(day&&day.date == today)?'selected-day':(day.hasEvents)?'schedule-day':''" :key="index_j"
                                     @click="onDayClick({month: index_month, day: day})">{{day | dayFilter}}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div v-else-if="mode == 1" class="calendar-month calendar-month-single">
            <div class="mui-scroll-wrapper" style="top: 0;padding-top: 0">
                <div class="mui-scroll">
                    <div class="calendar-shadow">
                        <div class="calendar-month-title calendarHeader">
                            <span class="month-title-normal leftBtn" @click="selectPrevMonth"></span>
                            <span class="month-title-active">{{selectedYear}}-{{selectedMonth+1}}月</span>
                            <span class="month-title-normal rightBtn" @click="selectNextMonth"></span>
                        </div>
                        <div class="calendar-week" style="background-color: #f35321;">
                            <div class="week" v-for="weektitle in weeksTitle" :key="weektitle" style="padding: 15px 10px;">
                                {{weektitle}}
                            </div>
                        </div>
                    </div>
                    <div class="calendar-week calendar-days" v-for="(weeks, index_i) in daysOfYear[selectedMonth]"
                         :key="index_i">
                        <div class="week week-day" v-for="(day, index_j) in weeks" :class="getTodayClass(day)"
                             :key="index_j" @click="day.date?onMonthDayClick({weekdays:weeks, day:day, week: index_i}):''">{{day | dayFilter}}
                        </div>
                    </div>
                </div>
            </div>

        </div>
        <div v-else-if="mode == 2" class="calendar-week-single calendar-week-hour">
            <div class="bg-calendar">
                <div class="calendar-week">
                    <div class="week" v-for="weektitle in weeksTitle" :key="weektitle">{{weektitle}}</div>
                </div>
                <div class="calendar-week calendar-week-day">
                    <div class="week week-day" v-for="(day, index) in dayOfWeek"
                         :class="getDayClass(day)" :key="index"
                         @click="day.date?onWeekDayClick({index: index, day: day}):''"><span>{{day | dayFilter}}</span>
                    </div>
                </div>
            </div>

            <!--<div class="mui-scroll-wrapper" style="top: 80px;z-index: -1;padding-top: 15px;">-->
                <!--<div class="mui-scroll">-->
                    <!--<div class="day-hours">-->
                        <!--<div class="day-hour" v-for="(text,hour,index) in dayHours" :key="index">-->
                            <!--<span class="day-hour-text" :class="hour == currentHour?'day-hour-text-active':''">{{text.text}}{{hour}}时</span>-->
                            <!--<span class="day-hour-line" :class="hour == currentHour?'day-hour-line-active':''"></span>-->
                        <!--</div>-->
                    <!--</div>-->
                <!--</div>-->
            <!--</div>-->

            <div id="scroll1" class="mui-scroll-wrapper" style="top: 80px;z-index: -1;padding-top: 15px;background: #efeff4;">
                <div class="mui-scroll">
                    <!--列表-->
                    <div class="mui-card" v-for="item in taskItem">
                        <div class="mui-card-content">
                            <div class="mui-card-content-inner">
                                <div v-if="item.GWBA003!='-'" @click="showTaskInfo(item)" class="mui-row">
                                    <div class="ef-rightBox">
                                        <p class="card_title">{{item.GWBA001}}</p>
                                        <p style="padding: 12px 10px 0;margin-bottom: 0;color: #000;"><span style="max-width: 20px;display: inline-block;margin-right: 5px;vertical-align: middle;"><img src="../../../img/time.png" style="max-width: 100%"/> </span>{{item.GWBA003 | yyyymmddhhmm}} - {{item.GWBA004 | yyyymmddhhmm}}</p>
                                        <p style="padding: 12px 10px 10px;margin-bottom: 0;color: #000;"><span style="max-width: 20px;display: inline-block;margin-right: 5px;vertical-align: middle;"><img src="../../../img/addres.png" style="max-width: 100%"/> </span>{{item.GWBA005}}</p>
                                    </div>
                                </div>
                                <div v-if="item.GWBA003=='-'" @click="addDetails(item)" class="mui-row">
                                    <p class="card_title">{{item.GWBA001}}</p>
                                    <div class="ef-rightBox flelxItem">
                                        <div class="leftMain"><img src="../../../img/word.png"/></div>
                                        <div class="rightMain">
                                            <p style="text-indent: -9999px;">{{item.GWBA003}} - {{item.GWBA004}}</p>
                                            <p class="card_btn">{{item.GWBA005}}</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!--<div class="mui-card" v-if="taskItem==''">-->
                        <!--<div class="mui-card-content">-->
                            <!--<div class="mui-card-content-inner">-->
                                <!--<div @click="showDetails" class="mui-row">-->
                                    <!--<div class="ef-rightBox">-->
                                        <!--<p>{{date}}</p>-->
                                        <!--<p>&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;</p>-->
                                        <!--<p>点击 创建日程</p>-->
                                    <!--</div>-->
                                <!--</div>-->
                            <!--</div>-->
                        <!--</div>-->
                    <!--</div>-->
                </div>
            </div>
        </div>
    </div>

    <div class="footer footer_icon">
        <a @click="yearBtn('left')" :class="{'active':showLeft}"><i class="iconfont icon icon-02"></i></a>
        <a @click="selectToday('center')" :class="{'active':showCenter}"><i class="iconfont icon icon-03"></i></a>
        <a @click="addDetails('right')" :class="{'active':showRight}"><i class="iconfont icon icon-01"></i></a>
    </div>
</div>

<script id="taskitem-template" type="text/x-template">
    <ul class="mui-table-view" id="OA_task_1">
        <li v-for="(val,index) in model" class="mui-table-view-cell mui-media">
            <div class="mui-slider-right mui-disabled">
                <a class="mui-btn mui-btn-red" @tap.stop="deleteDetail(val,$event)">删除</a>
            </div>
            <div class="mui-slider-handle wf-slider-handle">
                <a @tap.stop="showDetail(val)" href="javascript:;" style="flex: 1;">
                    <div class="mui-media-body wf-price-color">
                        <h4>{{val.GWBA001}}</h4>
                        <div class="mui-card-footer">

                        </div>
                    </div>
                </a>
            </div>

        </li>
    </ul>
</script>
</body>
</html>